13996527831
详细

localstorage本地存储是什么意思?

发表日期:2014-10-23 10:05:55   作者来源:米卓网络   浏览:    

  LocalStorage本地存储作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中,而客户端一般是指上海网站设计用户的计算机。在移动设备上,由于大部分浏览器都支持web storage特性,因此在android和ios等智能手机上的web浏览器都能正常使用该特性。

LocalStorage本地存储流程

  localStorage保存的数据,一般情况下是永久保存的,也就是说只要采用localstorage保存信息,数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动,数据让然存在。知道用户或程序明确制定删除,数据的生命周期才会结束。

  在安全性方面,localstorage是域内安全的,即localstorage是基于域的。任何在该域内的所有页面,都可以访问localstorage数据。但让然存在一个问题,就是各个浏览器厂商的浏览器之间的数据是各自独立的。也就是说,如果在firefox中使用localstorage存储一组数据,在chrome浏览器下是无法读取的。同样,由于localstorage数据是保存在用户的设备中的,因此同一个应用程序在不同设备上保存的数据是不同的。

  说到本地存储,最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样。

  首先自然是检测浏览器是否支持本地存储。在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例。

  if(window.localStorage){

  alert('This browser supports localStorage');

  }else{

  alert('This browser does NOT support localStorage');

  }

  存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:

  localStorage.a = 3;//设置a为"3"

  localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值

  localStorage.setItem("b","isaac");//设置b为"isaac"

  var a1 = localStorage["a"];//获取a的值

  var a2 = localStorage.a;//获取a的值

  var b = localStorage.getItem("b");//获取b的值

  localStorage.removeItem("c");//清除c的值

  这里最推荐使用的自然是getItem()和setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。另外,HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:

  var storage = window.localStorage;

  function showStorage(){

  for(var i=0;i

  //key(i)获得相应的键,再用getItem()方法获得对应的值

  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "

  ");}